import $ from 'jquery'
import Vue from 'vue'
import iframeResize from 'iframe-resizer/js/iframeResizer.contentWindow.js'
import router from '@/router'
import store from '@/store'
import { getToken } from '@/utils/auth'

window.jQuery = $
const layer = require('layui-layer')

class FrameDialog {
  /**
   * 关闭弹窗
   * @param {*} index 要关闭的弹窗的index
   */
  static close(index) {
    layer.close(index)
  }
  /**
   * 关闭所有弹窗
   */
  static closeAll() {
    layer.closeAll()
  }
  /**
   * 打开弹窗
   * @param {*} title 弹窗标题
   * @param {*} url 弹窗内容的url
   * @param {*} options 弹窗设置（详情请见layui官网）
   * @param {*} params 弹窗组件参数
   */
  static show(id, title, url, options, params, frameOptions) {
    return new Promise((resolve, reject) => {
      let layerOptions = {
        title: title,
        type: 1,
        skin: 'layer-dialog',
        resize: false,
        maxmin: false,
        offset: 'auto',
        scrollbar: false,
        zIndex: 1000,
        index: 0,
        contentDom: null,
        success: function(layero, index) {
          var iFrameDom = $(layero).find('iframe')
        }
      }
      layerOptions = { ...layerOptions, ...options }
      // layerOptions.end = () => {
      //   console.log(JSON.stringify(layerOptions.contentDom))
      //   if (layerOptions.contentDom) document.body.removeChild(layerOptions.contentDom)
      // }

      let observer = {
        cancel: function (isSuccess = false, data = undefined) {
          layer.close(this.index)
          if (isSuccess) {
            resolve(data)
          } else {
            reject()
          }
        },
        index: -1
      }
      layerOptions.cancel = () => {
        reject()
      }
      let dom = document.createElement('div')
      dom.style.padding = '5px'
      dom.style.overflow = 'hidden'
      let frameDom  = document.createElement('iframe')
      frameDom.id = id || url
      frameDom.name = id || url
      frameDom.style.width = frameOptions.width
      frameDom.style.height = frameOptions.height
      // frameDom.style.minHeight = '580px'
      frameDom.style.border= '0px'
      frameDom.style.overflow = 'hidden'
      frameDom.sandbox = 'allow-forms allow-same-origin allow-scripts'
      frameDom.onload = () => {
        if(frameDom.contentDocument.readyState === 'complete') {
          const script = frameDom.contentWindow.document.createElement('script')
          script.type = 'text/javascript'
          const scriptContent = `
            const xhr = new XMLHttpRequest();
            xhr.open('GET', ' true);
            xhr.setRequestHeader('Authorization', '${ getToken() }');
            xhr.send();
            xhr.onload = function() {
              if (xhr.status === 200) {
              } else {}
            }
          `
          script.appendChild(document.createTextNode(scriptContent))
          frameDom.contentWindow.document.body.appendChild(script)
          frameDom.contentWindow.sendRequest()
        }
        frameDom.onload = null
      }
      frameDom.src = url
      dom.appendChild(frameDom)
      layerOptions.contentDom = dom.outerHTML
      layerOptions.content = layerOptions.contentDom
      setTimeout(() => {
        observer.index = layer.open(layerOptions)
      }, 100)
    })
  }
}

Vue.prototype.$frameDialog = FrameDialog

export default FrameDialog
